<template>
  <div id="box">
    <div class="small">
      <div class="small-top">
        <input type="text" placeholder="请输入账号" v-model="account">
        <input type="text" placeholder="请输入手机号" v-model="tel">
        <input type="text" placeholder="请输入姓名" v-model="userName">
        <el-button :icon="Search" @click="searchuser" style="width: 32px; height: 57%; background-color: #5981E1; color: #fff; font-size: 20px; border:none; border-radius: 7px;" />
      </div>
      <div class="small-bottom">
        <el-table :data="user" style="width: 100%">
          <el-table-column prop="userName" label="姓名" width="119" />
          <el-table-column prop="sex" label="性别" width="119">
            <template #default="scoped">
              {{ sexs(scoped.row.sex) }}
            </template>
          </el-table-column>
          <el-table-column prop="nickName" label="用户" width="119" />
          <el-table-column prop="account" label="账户" width="119" />
          <el-table-column prop="tel" label="手机号" width="119" />
          <el-table-column prop="integral" label="积分" width="119" />
          <el-table-column prop="vipDelflag" width="119">
            <template #header>
              <select class="sel1" name="是否会员" id="vip" v-model="screen" @change="isVip">
                <option value="">是否会员</option>
                <option value="1">是</option>
                <option value="0">否</option>
              </select>
            </template>
            <template #default="scoped">
              {{ ye(scoped.row.vipDelflag) }}
            </template>
          </el-table-column>
          <el-table-column prop="memberPoints" label="会员积分" width="119" />
          <el-table-column prop="memberNumber" label="会员编号" width="119" />
          <el-table-column prop="vipName">
            <template #header>
              <select class="sel2" name="会员等级" id="vip" v-model="searching" @change="menbership">
                <option value="">会员等级</option>
                <option value="1">青铜</option>
                <option value="2">白银</option>
                <option value="3">黄金</option>
                <option value="4">铂金</option>
                <option value="5">钻石</option>
                <option value="8" @click="open">超级会员</option>
              </select>
            </template>
          </el-table-column>
        </el-table>
        <div class="foot">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :page-count="total"
            @current-change="pageChange" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue';
import axios from 'axios';
import { onMounted, ref } from 'vue';
// 分页
let pageSize = 7;
let currentPage = ref(1);
let total = ref(1);
const pageChange = (newPage) => {
  currentPage.value = newPage;
  usermanage();
};
onMounted(() => {
  usermanage();
});
// 调接口
var user = ref([]);
var usermanage = function () {
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
  axios.post("http://192.168.199.11:8001/ShoppingStreet/user/userList", {
    pageIndex: currentPage.value,
    pageSize: pageSize
  }).then((res) => {
    console.log(res);
    user.value = res.data.data.userList;
    total.value = res.data.data.pageCount;
  });
};

// 判断男女
var sexs = function (sexes) {
  if (sexes === '0') {
    return "男";
  } else {
    return "女";
  }
};
// 添加响应式变量用于存储搜索输入的值
const userName = ref('');
const account = ref('');
const tel = ref('');
// 添加响应式变量用于存储是否会员的选择状态
const isVipSelected = ref('');
// 调搜索接口
var searchuser = function () {
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
  axios.post("http://192.168.199.11:8001/ShoppingStreet/user/search", {
    pageIndex: 1,
    pageSize: 7,
    userName: userName.value,
    account: account.value,
    tel: tel.value,
    vipDelflag: isVipSelected.value
  }).then((res) => {
    user.value = res.data.data.userList;
    total.value = res.data.data.pageCount;
  });
};
// 筛选是否会员
var screen = ref('');
var isVip = function () {
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
  axios.post("http://192.168.199.11:8001/ShoppingStreet/user/yfMember", {
    pageIndex: 1,
    pageSize: 7,
    vipDelflag: screen.value
  }).then((res) => {
    user.value = res.data.data.userList;
    total.value = res.data.data.pageCount;
  });
};
// 判断是否会员
var ye = function (yw) {
  if (yw === 0) {
    return "否";
  } else if (yw === 1) {
    return "是";
  }
};

// 会员等级检索
var searching = ref('');
var menbership = function() {
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
  axios.post("http://192.168.199.11:8001/ShoppingStreet/user/lvMember", {
    pageIndex: 1,
    pageSize: 7,
    lvId: searching.value
  }).then((res) => {
    console.log(res);
    if (searching.value === '8') {
      alert("该会员已删除")
      user.value = []; // 弹出提示后设置为空数组
      total.value = res.data.data.pageCount;
    } else {
      user.value = res.data.data.userList;
      total.value = res.data.data.pageCount;
    }
    if(searching.value === ''){
      user.value = [];
      total.value = res.data.data.pageCount;
    }
  });
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
#box {
  width: 100%;
  height: 100%;
  background-color: #F5F5F5;
}
.small {
  width: 90%;
  height: 90%;
  margin: 0 auto;
  box-sizing: border-box;
  padding-top: 15px;
}
.small-top {
  width: 100%;
  height: 10%;
  box-sizing: border-box;
  line-height: 50px;
}
input {
  width: 16%;
  height: 57%;
  margin-right: 10px;
  border: 1px solid #EFEFEF;
  border-radius: 5px;
  box-shadow: 0px 3px 5px 0px #E7E7E7;
  box-sizing: border-box;
  padding-left: 15px;
  outline: none;
}
.small-bottom {
  width: 100%;
  height: 95%;
  background-color: #fff;
  margin-top: 15px;
}
.el-table--fit {
  width: 100%;
  height: 100%;
}
.el-table {
  --el-table-border-color: none;
  --el-table-border: 0px solid var(--el-table-border-color);
}
:deep(.cell) {
  text-align: center;
  color: #000;
  border: none;
}
.sel1 {
  border: none;
  font-weight: 600;
  outline: none;
}
.sel2 {
  border: none;
  font-weight: 600;
  outline: none;
}
.foot {
  width: 77%;
  height: 10%;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 41px;
}
.el-pagination {
  justify-content: center;
}
input{
  outline: none;
}
</style>